<template>
  <div class="container">
    <el-container>
      <!-- <el-header>
        <div class="warning" v-show="noticeShow">
          <div class="icon">
            <i class="el-icon-warning"></i>
          </div>
          <div class="content">
            <div class="con-tit">系统公告：</div>
            <div class="con">
              <span style="font-size:14px">{{ noticeContent }}</span>
            </div>
          </div>
        </div>
      </el-header> -->
      <el-main>
        <div class="bg-item">
          <img class="logo-icon" src="../../assets/logovpm1.png" alt="">
          <!-- <img class="img-item" src="../../assets/bga.png" alt=""> -->
        </div>
        <div class="loginMain">
          <div class="login-con">
            <div class="logo">
              <img class="img" src="../../assets/image.png" alt="">
            </div>
            <div class="sysTitle">
              <span>视频呼叫中心</span>
            </div>
            <div class="login">
              <el-form
                ref="loginForm"
                :model="ruleForm"
                :rules="rules"
                status-icon
                label-width="100px"
                class="login-box"
              >
                <div class="form-title">
                  <!-- <div>SGIN IN</div> -->
                  <div class="defeat" v-if="defeat">{{ message }}</div>
                </div>

                <el-form-item label-width="0" prop="entNum">
                  <el-input
                    size="medium"
                    class="form-input"
                    v-model.trim="ruleForm.entNum"
                    placeholder="请输入企业名"
                    clearable
                    autocomplete="new-entNum"
                  >
                    <i slot="prefix" class="iconfont icon_user icon-icon_user"></i>
                  </el-input>
                </el-form-item>

                <el-form-item label-width="0" prop="username">
                  <el-input
                    size="medium"
                    class="form-input"
                    v-model.trim="ruleForm.username"
                    placeholder="请输入用户名"
                    clearable
                    autocomplete="new-username"
                  >
                    <i slot="prefix" class="iconfont icon_user icon-icon_user"></i>
                  </el-input>
                </el-form-item>
                <el-form-item label-width="0" prop="password">
                  <el-input
                    size="medium"
                    class="form-input"
                    v-model.trim="ruleForm.password"
                    placeholder="请输入密码"
                    type="password"
                    clearable
                    autocomplete="new-password"
                  >
                    <i slot="prefix" class="iconfont icon_password icon-icon_password"></i>
                  </el-input>
                </el-form-item>
                <div class="isRemeber">
                  <el-checkbox size="small" v-model="isRemeber">七天内记住密码</el-checkbox>
                </div>
                <!-- <el-form-item label-width="0" prop="imageCode" v-show='showCode'>
                  <el-input
                    v-model="ruleForm.imageCode"
                    class="form-input auth-code"
                    placeholder="请输入验证码"
                    type="text"
                    clearable>
                    <i slot="prefix" class="el-input__icon fa fa-shield"/>
                  </el-input>
                  <div class='auth-img'>
                      <img :src="validationUrl"
                      alt="如果看不清请单击刷新"
                      @click="refreshCode"/>
                  </div>
                </el-form-item> -->
                <el-button size="medium" type="primary" class="login" @click="handleSubmit" style="font-size: 16px;"
                  >登 录</el-button
                >
              </el-form>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import Cookie from "js-cookie";
import MD5 from "js-md5";
const Base64 = require("js-base64").Base64;
import { title } from "@/settings";
import { login } from "@/api/user";
import { setToken } from "@/utils/auth";
const IMAGE_URL = "/imagecode";
// 获取随机uuid
function guid() {
  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
    let r = (Math.random() * 16) | 0,
      v = c == "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}
export default {
  data() {
    const uuid = guid();
    return {
      ruleForm: {
        username: "",
        entNum: "",
        password: ""
        // imageCode: "",
        // uuid: uuid
      },
      isRemeber: false,
      // validationUrl: IMAGE_URL + "?uuid=" + uuid,
      rules: {}, //
      defeat: "", //失败提示
      message: "", //失败提示消息
      // showCode:false,//是否展示验证码
      noticeShow: "", //是否显示公告
      noticeContent: "", //公告内容
      srcImg: "",
    };
  },
  created() {
    // if(document.body.clientWidth>1920){
    //   this.srcImg = require("../../assets/bg.png")
    // }
    // if(document.body.clientWidth<=1920){
    //   this.srcImg = require("../../assets/bg1.png")
    // }
    // window.onresize = () => {
    //   return (() => {
    //     if(document.body.clientWidth>1920){
    //       this.srcImg = require("../../assets/bg.png")
    //     }
    //     if(document.body.clientWidth<=1920){
    //       this.srcImg = require("../../assets/bg1.png")
    //     }
    //   })();
    // };
    // 在页面加载时从cookie获取登录信息
    let entNum = this.getCookies("epm_entNum");
    let username = this.getCookies("epm_username");
    let password = this.getCookies("epm_password");
    // 如果存在赋值给表单，并且将记住密码勾选
    if (username) {
      this.ruleForm.username = username;
      this.ruleForm.entNum = entNum;
      this.ruleForm.password = password;
      this.isRemeber = true;
    }
  },
  mounted() {
    // 绑定enter事件
    this.enterKeyup();

  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  destroyed() {
    // 销毁enter事件
    this.enterKeyupDestroyed();
  },
  methods: {
    enterKey(event) {
      const code = window.event.keyCode;
      if (code == 13) {
        this.handleSubmit();
      }
    },
    enterKeyupDestroyed() {
      window.document.removeEventListener("keyup", this.enterKey);
    },
    enterKeyup() {
      window.document.addEventListener("keyup", this.enterKey);
    },
    setCookies(entNum, username, password, exDays = 7) {
      // base64加密账号密码
      var cipherEntnum = Base64.encode(entNum);
      var cipherUsername = Base64.encode(username);
      var cipherPsw = Base64.encode(password);
      let exDate = new Date(); // 获取时间
      // exDate.setTime(exDate.getTime() + 24 * 60 * 60 * 1000 * exDays); // 保存的天数
      exDate.setTime(exDate.getTime() + 60 * 1000); // 保存的天数
      //字符串拼接cookie，为什么这里用了==，因为加密后的字符串也有个=号，
      // 影响下面getcookie的字符串切割，你也可以使用更炫酷的符号。
      // window.document.cookie = `opm_username =${cipherUsername};path=/;expires = ${exDate.toUTCString()}`;
      // window.document.cookie = `opm_password =${cipherPsw};path=/;expires = ${exDate.toUTCString()}`;
      // 或者你可以这样写
      Cookie.set("vpm_entNum", cipherEntnum, exDate.toUTCString());
      Cookie.set("vpm_username", cipherUsername, exDate.toUTCString());
      Cookie.set("vpm_password", cipherPsw, exDate.toUTCString());
    },
    /**
     * @describe: 读取cookies里面的账号密码
     **/
    getCookies(key) {
      let encodeVal = Cookie.get(key);
      //解码
      return encodeVal ? Base64.decode(encodeVal) : "";
    },
    clearCookies() {
      Cookie.remove(`vpm_entNum`);
      Cookie.remove(`vpm_username`);
      Cookie.remove(`vpm_password`);
    },
    //刷新验证码
    refreshCode() {
      const uuid = guid();
      this.validationUrl = IMAGE_URL + "?uuid=" + uuid;
      this.ruleForm.uuid = uuid;
    },
    handleSubmit() {

      if(!this.ruleForm.username){
        this.defeat = true;
        this.message = "用户名不能为空";
        return
      }
      if(!this.ruleForm.password){
        this.defeat = true;
        this.message = "密码不能为空";
        return
      }
      this.login();
    },
    login() {
      this.loading = true;
      if (this.isRemeber) {
        this.setCookies(
          this.ruleForm.username,
          this.ruleForm.password,
          this.ruleForm.entNum
        );
      } else {
        this.clearCookies();
      }
      login({ ...this.ruleForm, password: MD5(this.ruleForm.password) }).then(
        res => {
          if (res.code == 0) {
            this.defeat = false;
            //登录成功后,存token到cookie，跳转到 home欢迎页
              //登录epm
              setToken("bearer "+res.data);
              this.$router.push("/welcome");
          } else {
            this.defeat = true;
            this.message = res.msg;
          }



        }
      );
    }
    // getNews() {
    //   this.axios.post("/login/news", {}).then(response => {
    //     if(response.code==0){
    //       this.noticeShow = true;
    //       this.noticeContent = response.data;
    //     }else if(response.code==-1){
    //       this.noticeShow = false;
    //     }
    //   })
    // }
  }
};
</script>
<style lang="scss">
.form-input {
  .el-input__inner {
    border: none;
    background: #F6F6F6;
    color: #999999;
  }
}
.isRemeber {
  .el-checkbox__inner {
    border: none;
    background: #F6F6F6;
  }
}
</style>
<style lang="scss" scoped>
.container {
  // background: url("../../assets/bg.jpg");
  // background-size: cover;
  height: 100%;
  .el-container {
    height: 100%;
    // display: flex;
    // position: relative;
    .el-header {
      width: 80%;
      height: 60px;
      margin: 0 auto;
      margin-top: 40px;
      .warning {
        display: flex;
        height: 60px;
        justify-items: center;
        align-items: center;
        background: rgba(255, 255, 255, 0.5);
        .icon {
          flex: 0 0 35px;
          color: #ffffff;
          font-size: 30px;
        }
        .content {
          flex: 1;
          color: #ffffff;
          font-weight: bold;
          font-size: 15px;
        }
      }
    }
    // .el-main::after {
    //   content: "";
    //   display: block;
    //   clear: both;
    // }
    .el-main {
      padding: 0;
      width: 100%;
      height: 100%;
      display: flex;
      .bg-item{
        height: 100%;
        background-image: url("../../assets/bga.png");
        background-repeat: no-repeat;
        background-size:cover;
        background-position: center;
        overflow:hidden;
        .img-item{
          width: 100%;
          height: 100%;
        }
      }
      .loginMain {
        .login-con{
          width: 100%;
          height: 85%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        .logo{
          margin-bottom: 10px;
          margin-left: 200px;
          img{
            width: 52px;
            height: 52px;
          }
        }
        .sysTitle {
          width: 300px;
          text-align: center;
          margin-bottom: 15px;
          font-size: 20px;
          font-weight: bold;
          color: #333;
        }
        .login-box {
          min-height: 280px;
          width: 300px;
          // background: rgba(0, 0, 0, 0.6);
          // border-radius: 10px;
          // margin-right: 75px;
          // padding: 20px;
          text-align: center;
          .isRemeber {
            text-align: left;
            padding-left: 12px;
            padding-bottom: 10px;
          }
          .form-title {
            font-size: 18px;
            color: #ffffff;
            margin-bottom: 15px;
            // height: 30px;
            .defeat {
              color: red;
              font-size: 12px;
            }
          }
          .form-input {
            width: 90%;
          }
          .login {
            width: 90%;
          }
          .auth-code {
            width: 150px;
            display: inline-block;
          }
          .auth-img {
            float: right;
            // display: inline-block;
            width: 120px;
            vertical-align: middle;
            line-height: 55px;
            height: 40px;
            img {
              height: 30px;
            }
          }
        }
      }
    }
  }
}
.bg-item {
  // background: url('../../assets/bg1.png');
  // background-size: cover;
  // background-position: center;
  flex: 1;
  .logo-icon {
    width: 316px;
    height: 43px;
    position: absolute;
    top: 73px;
    left: 64px;
  }
}
.loginMain {
  flex: 0 0 550px;
}
.el-main {
  overflow-x: hidden;
}
@media screen and (max-width:1280px){
  .bg-item {
    flex: 0 0 850px;
    .logo-icon {
      width: 316px;
      height: 43px;
      position: absolute;
      top: 55px;
      left: 57px;
    }
  }
  .loginMain {
    flex: 0 0 430px;
  }
  .el-main {
    overflow-x: auto;
  }
}
@media screen and (min-width:1280px) {
  .bg-item {
    flex: 0 0 850px;
    .logo-icon {
      width: 316px;
      height: 43px;
      position: absolute;
      top: 55px;
      left: 57px;
    }
  }
  .loginMain {
    flex: 1;
  }
}
@media screen and (min-width:1600px) {
  .bg-item {
    flex: 1;
    .logo-icon {
      width: 316px;
      height: 43px;
      position: absolute;
      top: 73px;
      left: 64px;
    }
  }
  .loginMain {
    flex: 0 0 750px;
  }
}
</style>

